﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivAnimate.aspx.cs" Inherits="BugSysSolution.JsAnimate.DivAnimate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Javascript/jquery-1.8.0.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div_container1" style="text-align: center; position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; border: 1px solid red; z-index: 1;"></div>
    </form>
</body>
</html>
<script type="text/javascript">
    var arr = new Array();
    var d1 = $("<div style='text-align: center; position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; border: 1px solid red;z-index:1' movetag='1' tag='div'>1111</div>");
    var d2 = $("<div style='text-align: center; position: absolute; top: 100px; left: 0px; width: 100px; height: 100px; border: 1px solid red;z-index:2' movetag='2' tag='div'>2222</div>");
    var d3 = $("<div style='text-align: center; position: absolute; top: 100px; left: 0px; width: 100px; height: 100px; border: 1px solid red;z-index:3' movetag='3' tag='div'>3333</div>");
    var d4 = $("<div style='text-align: center; position: absolute; top: 100px; left: 0px; width: 100px; height: 100px; border: 1px solid red;z-index:4' movetag='4' tag='div'>4444</div>");
    arr.push(d1);
    arr.push(d2);
    arr.push(d3);
    arr.push(d4);

    var Animate_Div = function (arr) {
        this.count = 0;
        this.intervalId = 0;
        this.moveTag = true;
        this.moveIndex = 0;
        this.el = null;

        this.Init = function () {
            if (arr == null) {
                return;
            }
            this.count = arr.length;
            for (var i = 0; i < arr.length; i++) {
                $("#div_container1").append(arr[i]);
            }
        }

        this.Move = function () {
            var tempobj = this;

            if (this.moveIndex == this.count) {
                this.moveIndex = 0;
            }
            this.el = arr[this.moveIndex];
            this.el.css("display", "block");
            this.el.animate({ left: "100px" }, "normal", function () {
                tempobj.el.css("z-index", "-1").css("top", "100px").css("left", "100px");
                arr[tempobj.moveIndex].css("z-index", "999");
                arr[tempobj.moveIndex + 1].css("top", "100px").css("left", "0px");
                tempobj.moveIndex++;
            });
            
        }

        this.Stop = function () {

        }

        this.NextShow = function () {

        }

        this.PrevShow = function () {

        }

        this.Animate = function () {
            this.Init();
            var temp = this;
            setInterval(function () {
                temp.Move();
            }, 1000);
        }
    }

    var ani = new Animate_Div(arr);
    ani.Animate();
</script>
